{% load i18n wagtailcore_tags %}

<div class="scal-outer">
<section class="scal-wrapper">

  {% if bloco.title %}
  <div class="scal-header">
    <h2 class="scal-titulo" {% if bloco.cor_title %}style="color: #{{ bloco.cor_title }};"{% endif %}>
      {{ bloco.title }}
    </h2>
  </div>
  {% endif %}

  {% if todos_itens %}

  {# ── Barra de filtros ── #}
  <div class="scal-filtros" role="group" aria-label="Filtros">

    {# Linha 1: Selects + Toggle de view #}
    <div class="scal-filtros-top">
      <div class="scal-selects">

        {% if mostrar_filtro_apis and areas_disponiveis|length > 1 %}
        <div class="scal-area-dropdown" data-filtro="area">
          <button class="scal-area-btn" type="button" aria-expanded="false" aria-label="Área">
            <span class="scal-area-btn-label">Todas as áreas</span>
            <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">expand_more</span>
          </button>
          <div class="scal-area-panel" hidden>
            {% for area in areas_disponiveis %}
            <label class="scal-mes-item">
              <input type="checkbox" class="scal-area-check" value="{{ area }}">
              <span>{{ area }}</span>
            </label>
            {% endfor %}
          </div>
        </div>
        {% endif %}

        {% if anos_disponiveis %}
        <select class="scal-select" data-filtro="ano" aria-label="Ano">
          <option value="todos">Todos os anos</option>
          {% for ano in anos_disponiveis %}
          <option value="{{ ano }}">{{ ano }}</option>
          {% endfor %}
        </select>
        {% endif %}

        {% if meses_disponiveis %}
        <div class="scal-mes-dropdown" data-filtro="mes">
          <button class="scal-mes-btn" type="button" aria-expanded="false" aria-label="Mês">
            <span class="scal-mes-btn-label">Todos os meses</span>
            <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">expand_more</span>
          </button>
          <div class="scal-mes-panel" hidden>
            {% for item_mes in meses_disponiveis %}
            <label class="scal-mes-item" data-ano="{{ item_mes.ano }}">
              <input type="checkbox" class="scal-mes-check"
                     value="{{ item_mes.ano }}-{{ item_mes.mes|stringformat:'02d' }}"
                     data-ano="{{ item_mes.ano }}">
              <span>{{ item_mes.data_ref|date:"F"|capfirst }}<span class="scal-mes-item-ano"> {{ item_mes.ano }}</span></span>
            </label>
            {% endfor %}
          </div>
        </div>
        {% endif %}

      </div>

      <div class="scal-view-toggle" role="group" aria-label="Visualização">
        <button class="scal-view-btn" data-view="kanban" title="Kanban" aria-pressed="false">
          <span class="material-symbols-outlined">view_kanban</span>
        </button>
        <button class="scal-view-btn" data-view="lista" title="Lista" aria-pressed="false">
          <span class="material-symbols-outlined">view_list</span>
        </button>
        <button class="scal-view-btn scal-view-btn--ativo" data-view="calendario" title="Calendário" aria-pressed="true">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
      </div>
    </div>

    {# Linha 2: Chips de filtro #}
    <div class="scal-filtros-chips">
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Status</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="status" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="status" data-valor="aberto">
            <span class="scal-chip-dot scal-dot--aberto"></span>Inscrições abertas
          </button>
          <button class="scal-chip" data-filtro="status" data-valor="previsto">
            <span class="scal-chip-dot scal-dot--previsto"></span>Previsto
          </button>
        </div>
      </div>
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Modalidade</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="modalidade" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="modalidade" data-valor="presencial">
            <span class="material-symbols-outlined scal-chip-icon">location_on</span>Presencial
          </button>
          <button class="scal-chip" data-filtro="modalidade" data-valor="remoto">
            <span class="material-symbols-outlined scal-chip-icon">laptop</span>Remoto
          </button>
        </div>
      </div>

      <button class="scal-limpar-filtros scal-limpar-filtros--inline" style="display:none;">
        <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">filter_list_off</span>
        Limpar filtros
      </button>
    </div>

  </div>
  <div class="scal-view" data-view-container="kanban" style="display:none;">
    <div class="scal-board-wrapper">
      <button class="scal-board-nav scal-board-nav--prev" aria-label="Rolar para esquerda">
        <span class="visually-hidden">Rolar para esquerda</span>
        <span class="material-symbols-outlined">chevron_left</span>
      </button>
      <button class="scal-board-nav scal-board-nav--next" aria-label="Rolar para direita">
        <span class="visually-hidden">Rolar para direita</span>
        <span class="material-symbols-outlined">chevron_right</span>
      </button>
    <div class="scal-board">

      {% for grupo in calendario %}
      <div class="scal-coluna"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-coluna-header">
          <span class="scal-coluna-titulo">{{ grupo.data_ref|date:"F" }}</span>
          <span class="scal-coluna-ano">{{ grupo.ano }}</span>
          <span class="scal-coluna-count"><span class="scal-mes-num">{{ grupo.itens|length }}</span></span>
        </div>

        <div class="scal-coluna-itens">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-api="{{ item.cal_api }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}">

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges-wrapper">
                  <div class="wrapper-tag-title">
                  <div class="scal-card-badges">
                    {% if item.cal_tipo == 'evento' %}
                      <span class="scal-badge scal-badge--evento">Evento</span>
                    {% else %}
                      <span class="scal-badge scal-badge--curso">Curso</span>
                    {% endif %}
                    {% if item.cal_status == 'aberto' %}
                      <span class="scal-badge scal-badge--aberto">Aberto</span>
                    {% endif %}
                    {% if item.cal_modalidade == 'presencial' %}
                      <span class="scal-badge scal-badge--modalidade">
                        <span class="material-symbols-outlined scal-badge-icon">location_on</span>Presencial
                      </span>
                    {% else %}
                      <span class="scal-badge scal-badge--modalidade">
                        <span class="material-symbols-outlined scal-badge-icon">laptop</span>Remoto
                      </span>
                    {% endif %}
                  </div>

                  {% if item.cal_nome %}
                  <p class="scal-card-titulo">
                    {% if item.url %}
                      <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                    {% else %}
                      {{ item.cal_nome }}
                    {% endif %}
                  </p>
                  {% endif %}
                </div>

                  <div class="scal-card-meta">
                    {% if item.horario %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
                    </span>
                    {% endif %}
                    {% if item.carga_horaria %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
                    </span>
                    {% endif %}
                  </div>
              </div>
            </div>

          </div>
          {% endfor %}

          <div class="scal-coluna-vazia" style="display:none;">
            <span class="material-symbols-outlined">event_busy</span>
            <p>Sem itens</p>
          </div>
        </div>

      </div>
      {% endfor %}

    </div>
    </div>
  </div>


  <div class="scal-view" data-view-container="lista" style="display:none;">
    <div class="scal-lista">

      {% for grupo in calendario %}
      <div class="scal-lista-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-lista-mes-header">
          <span class="scal-lista-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-lista-mes-count"><span class="scal-lista-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>

        <div class="scal-lista-itens">
          {% for item in grupo.itens %}
          <div class="scal-lista-row"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-api="{{ item.cal_api }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}">

            {% if item.data_inicio %}
            <div class="scal-lista-data">
              <span class="scal-lista-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-lista-mes-abr">{{ item.data_inicio|date:"M" }}</span>
            </div>
            {% endif %}

            <div class="scal-lista-badges">
              {% if item.cal_tipo == 'evento' %}
                <span class="scal-badge scal-badge--evento">Evento</span>
              {% else %}
                <span class="scal-badge scal-badge--curso">Curso</span>
              {% endif %}
              {% if item.cal_status == 'aberto' %}
                <span class="scal-badge scal-badge--aberto">Aberto</span>
              {% endif %}
            </div>

            <p class="scal-lista-nome">
              {% if item.url %}
                <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
              {% else %}
                {{ item.cal_nome }}
              {% endif %}
            </p>

            <div class="scal-lista-meta">
              {% if item.cal_modalidade == 'presencial' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">location_on</span>Presencial
                </span>
              {% else %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">laptop</span>Remoto
                </span>
              {% endif %}
              {% if item.horario %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
              </span>
              {% endif %}
              {% if item.carga_horaria %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
              </span>
              {% endif %}
            </div>

          </div>
          {% endfor %}
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="calendario">
    <div class="scal-grid-cards"></div>
  </div>

  {# ── Estado vazio geral ── #}
  <div class="scal-vazio-filtro" style="display:none;" aria-live="polite">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item encontrado com os filtros selecionados.</p>
    <button class="scal-limpar-filtros">Limpar filtros</button>
  </div>

  {% else %}
  <div class="scal-vazio-filtro">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item disponível no momento.</p>
  </div>
  {% endif %}

</section>
</div>

<style>
  /* ── Wrapper ── */
  .scal-outer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .scal-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* ── Título ── */
  .scal-header { text-align: center; }
  .scal-titulo { font-size: 40px; font-weight: 600; color: #434A54; margin: 0; }

  /* ── Filtros ── */
  .scal-filtros {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #F5F7FA;
    border-radius: 12px;
    padding: 20px 24px;
  }

  /* Linha 1: selects + toggle */
  .scal-filtros-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .scal-selects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .scal-select {
    padding: 7px 32px 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2358606E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    appearance: none;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 140px;
  }
  .scal-select:focus { outline: none; border-color: #007D7A; }

  /* ── Dropdown de áreas ── */
  .scal-area-dropdown { position: relative; }
  .scal-area-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    white-space: nowrap;
    transition: border-color 0.15s;
  }
  .scal-area-btn:focus { outline: none; border-color: #007D7A; }
  .scal-area-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
  }

  /* ── Dropdown de meses ── */
  .scal-mes-dropdown { position: relative; }
  .scal-mes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    white-space: nowrap;
    transition: border-color 0.15s;
  }
  .scal-mes-btn:focus { outline: none; border-color: #007D7A; }
  .scal-mes-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
  }
  .scal-mes-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #58606E;
    font-weight: 500;
    transition: background 0.1s;
    white-space: nowrap;
  }
  .scal-mes-item:hover { background: #F5F7FA; }
  .scal-mes-item--oculta { display: none !important; }
  .scal-mes-check { accent-color: #007D7A; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
  .scal-mes-item-ano { color: #9AA3AF; }
  .scal-mes-panel--ano-filtrado .scal-mes-item-ano { display: none; }

  /* View toggle */
  .scal-view-toggle {
    display: flex;
    gap: 4px;
    background: #E8EDF5;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
  }
  .scal-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #9AA3AF;
    cursor: pointer;
  }
  .scal-view-btn:hover { background: #fff; color: #58606E; }
  .scal-view-btn--ativo { background: #fff; color: #007D7A; box-shadow: 0 1px 4px rgba(0,0,0,0.12);display: flex;
    align-items: center;
    justify-content: center; }
  .scal-view-btn .material-symbols-outlined { font-size: 20px; margin: 0;}

  /* Linha 2: chips */
  .scal-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #E2E8F0;
    padding-top: 16px;
  }
  .scal-filtro-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .scal-filtro-label {
    font-size: 12px;
    font-weight: 700;
    color: #58606E;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }
  .scal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 24px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .scal-chip:hover { background: #006969; color: white; }
  .scal-chip--ativo { border-color: #024248; background: #024248; color: #fff; }
  .scal-chip--ativo:hover { background: #006969; color: white; }
  .scal-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .scal-dot--aberto   { background: #2E7D32; }
  .scal-dot--previsto { background: #9E9E9E; }
  .scal-chip-icon { font-size: 14px; line-height: 1; color: inherit; }

  /* ══════════════════════════════════════════
     VIEW: KANBAN
  ══════════════════════════════════════════ */
  .scal-board-wrapper {
    position: relative;
  }
  .scal-board-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background-color: #007D7A;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, opacity 0.25s;
  }
  .scal-board-nav:hover { background-color: #006969; }
  .scal-board-nav:active { background-color: #025257; }
  .scal-board-nav--prev { left: 0; box-shadow: 2px 5px 8px rgba(0,0,0,0.25); }
  .scal-board-nav--next { right: 0; box-shadow: -1px 4px 7px rgba(0,0,0,0.25); }
  .scal-board-nav--oculto { opacity: 0; pointer-events: none; }
  .scal-board-nav .material-symbols-outlined { font-size: 28px; font-weight: 900; }
  @media (max-width: 640px) { .scal-board-nav { display: none; } }
  .scal-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #C8D1E0 transparent;
  }
  .scal-board::-webkit-scrollbar { height: 6px; }
  .scal-board::-webkit-scrollbar-track { background: transparent; }
  .scal-board::-webkit-scrollbar-thumb { background: #C8D1E0; border-radius: 3px; }

  .scal-coluna {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .scal-coluna--vazia-total { opacity: 0.4; }

  .scal-coluna-header {
    position: sticky;
    top: 0;
    background: #024248;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
  }
  .scal-coluna-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    flex: 1;
  }
  .scal-coluna-ano { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 400; }
  .scal-coluna-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
  }
  .scal-coluna-itens { display: flex; flex-direction: column; gap: 8px; }

  .scal-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .scal-card:hover { box-shadow: 0 4px 16px rgba(0,125,122,0.12); color: #006969; background-color: #EBEFF5; text-decoration: none;}
  .scal-card:has(.scal-card-link) { cursor: pointer; }
  .scal-card--oculto { display: none; }

  .scal-card-data {
    flex-shrink: 0;
    width: 52px;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    gap: 1px;
    border-right: 1px solid #E2E8F0;
    text-align: center;
  }
  .scal-card-dia { font-size: 22px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-card-mes-abr {
    font-size: 10px;
    font-weight: 600;
    color: #9AA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .scal-card-badges-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 8px;
  }
  .scal-card-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .scal-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .scal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .scal-badge--evento    { border: 1px solid #D1441F; color: #D1441F; background: #FFFFFF; }
  .scal-badge--curso     { border: 1px solid #024248; color: #024248; background: #FFFFFF; }
  .scal-badge--aberto    { border: 1px solid #0A6D3B; color: #0A6D3B; background: #FFFFFF; }
  .scal-badge--previsto  { border: 1px solid #313E36; color: #313E36; background: #FFFFFF; }
  .scal-badge--modalidade { border: 1px solid #8250BD; color: #8250BD; background: #FFFFFF; }
  .scal-badge-icon { font-size: 11px; line-height: 1; color: inherit; }

  .scal-card-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .wrapper-tag-title{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .scal-card-link { color: #007D7A; text-decoration: none; }
  .scal-card-link:hover { text-decoration: underline; }
  .scal-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

  .scal-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-meta-item { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: #9AA3AF; }
  .scal-meta-icon { font-size: 13px; line-height: 1; }

  .scal-coluna-vazia {
    text-align: center;
    padding: 24px 12px;
    color: #C8D1E0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px dashed #EBEFF5;
    border-radius: 10px;
  }
  .scal-coluna-vazia .material-symbols-outlined { font-size: 28px; }
  .scal-coluna-vazia p { font-size: 12px; margin: 0; }

  /* ══════════════════════════════════════════
     VIEW: LISTA
  ══════════════════════════════════════════ */
  .scal-lista { display: flex; flex-direction: column; gap: 20px; }

  .scal-lista-grupo { display: flex; flex-direction: column; }

  .scal-lista-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #024248;
    border-radius: 10px 10px 0 0;
  }
  .scal-lista-mes-titulo { font-size: 18px; font-weight: 700; color: #fff; text-transform: capitalize; }
  .scal-lista-mes-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: 10px;
  }

  .scal-lista-itens {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }

  .scal-lista-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid #F0F4F8;
    transition: background 0.12s;
    position: relative;
  }
  .scal-lista-row:last-child { border-bottom: none; }
  .scal-lista-row:hover { color: #006969; background-color: #EBEFF5; }

  .scal-lista-data {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scal-lista-dia { font-size: 18px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-lista-mes-abr {
    font-size: 12px;
    font-weight: 600;
    color: #9AA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .scal-lista-badges { flex-shrink: 0; display: flex; gap: 4px; align-items: center; }

  .scal-lista-nome {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scal-lista-meta {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  /* ══════════════════════════════════════════
     VIEW: GRID DE CARDS
  ══════════════════════════════════════════ */
  .scal-grid-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .scal-grid-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #024248;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .scal-grid-mes-titulo { font-size: 14px; font-weight: 700; color: #fff; text-transform: capitalize; }
  .scal-grid-mes-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: 10px;
  }
  .scal-grid-mes-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .scal-grid-mes-cards .scal-card {
    height: 100%;
  }
  @media (max-width: 960px) {
    .scal-grid-mes-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .scal-grid-mes-cards { grid-template-columns: 1fr; }
  }

  /* ── Estado vazio geral ── */
  .scal-vazio-filtro {
    text-align: center;
    padding: 48px 20px;
    color: #9AA3AF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .scal-vazio-icon { font-size: 48px; color: #C8D1E0; }
  .scal-limpar-filtros {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 24px;
    border: 1.5px solid #007D7A;
    background: #fff;
    color: #007D7A;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .scal-limpar-filtros:hover { background: #007D7A; color: #fff; }
  .scal-limpar-filtros--inline { align-self: center; margin-left: auto; }

  /* ── Responsivo ── */
  @media (max-width: 640px) {
    .scal-wrapper { padding: 24px 16px; gap: 20px; }
    .scal-titulo { font-size: 28px; }
    .scal-filtros { padding: 16px; }
    .scal-filtros-top { flex-direction: column; align-items: flex-start; }
    .scal-selects { width: 100%; }
    .scal-select { flex: 1; min-width: 100px; }
    .scal-coluna { flex: 0 0 220px; }
    .scal-cal-dia, .scal-cal-dia-empty { min-height: 72px; padding: 4px; }
    .scal-cal-titulo-mes { font-size: 15px; min-width: 160px; }
    .scal-lista-meta { display: none; }
    .scal-lista-nome { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  }
</style>

<script>
  (function () {
    /* ── Encontra o wrapper: currentScript é mais confiável, fallback por marca ── */
    var wrapper = null;
    if (document.currentScript) {
      wrapper = document.currentScript.closest('.scal-outer');
    }
    if (!wrapper) {
      var outers = document.querySelectorAll('.scal-outer:not([data-scal-init])');
      wrapper = outers[outers.length - 1] || null;
    }
    if (!wrapper) return;
    wrapper.setAttribute('data-scal-init', '1');

    var filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', tipo: 'todos' };
    var viewAtual = 'calendario';
    var viewManual = false; // true somente após clique manual no toggle

    // Estado do calendário
    var hoje = new Date();
    var calAno = hoje.getFullYear();
    var calMes = hoje.getMonth() + 1;

    // Inicializa com o primeiro mês disponível nos dados
    var primeiraColuna = wrapper.querySelector('.scal-coluna');
    if (primeiraColuna && primeiraColuna.dataset.mes) {
      var partsInit = primeiraColuna.dataset.mes.split('-');
      calAno = parseInt(partsInit[0]);
      calMes = parseInt(partsInit[1]);
    }

    /* ── Toggle de view ── */
    wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        mudarView(btn.dataset.view, true);
      });
    });

    function mudarView(view, manual) {
      if (manual) viewManual = true;   // só seta true; nunca reseta para false aqui
      viewAtual = view;

      wrapper.querySelectorAll('.scal-view').forEach(function (el) {
        el.style.display = el.dataset.viewContainer === view ? '' : 'none';
      });
      wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
        var ativo = btn.dataset.view === view;
        btn.classList.toggle('scal-view-btn--ativo', ativo);
        btn.setAttribute('aria-pressed', ativo ? 'true' : 'false');
      });

      if (view === 'calendario') {
        if (filtros.meses.length === 1) {
          var parts = filtros.meses[0].split('-');
          calAno = parseInt(parts[0]);
          calMes = parseInt(parts[1]);
        }
        var nav = wrapper.querySelector('.scal-cal-nav');
        if (nav) nav.style.display = filtros.meses.length > 0 ? 'none' : '';
        renderizarCalendario();
      }
    }

    /* ── Selects ── */
    wrapper.querySelectorAll('.scal-select').forEach(function (sel) {
      sel.addEventListener('change', function () {
        filtros[sel.dataset.filtro] = sel.value;
        if (sel.dataset.filtro === 'ano') {
          filtrarMesesPorAno(sel.value);
          if (sel.value !== 'todos') {
            mudarView('calendario', true);
          } else if (viewAtual === 'calendario') {
            viewManual = false;
          }
        }
        aplicarFiltros();
      });
    });

    /* ── Chips ── */
    wrapper.querySelectorAll('.scal-chip').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var grupo = btn.dataset.filtro;
        filtros[grupo] = btn.dataset.valor;
        wrapper.querySelectorAll('.scal-chip[data-filtro="' + grupo + '"]')
          .forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        btn.classList.add('scal-chip--ativo');
        // Não altera viewManual — mantém a view atual
        aplicarFiltros();
      });
    });

    /* ── Dropdown de meses ── */
    var mesDropdown = wrapper.querySelector('.scal-mes-dropdown');
    if (mesDropdown) {
      var mesBtn = mesDropdown.querySelector('.scal-mes-btn');
      var mesPanelEl = mesDropdown.querySelector('.scal-mes-panel');

      mesBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !mesPanelEl.hidden;
        mesPanelEl.hidden = aberto;
        mesBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      mesPanelEl.querySelectorAll('.scal-mes-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.meses.push(cb.value);
          } else {
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
          atualizarLabelMes();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!mesDropdown.contains(e.target)) {
          mesPanelEl.hidden = true;
          mesBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    /* ── Dropdown de áreas ── */
    var areaDropdown = wrapper.querySelector('.scal-area-dropdown');
    if (areaDropdown) {
      var areaBtn = areaDropdown.querySelector('.scal-area-btn');
      var areaPanelEl = areaDropdown.querySelector('.scal-area-panel');

      areaBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !areaPanelEl.hidden;
        areaPanelEl.hidden = aberto;
        areaBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      areaPanelEl.querySelectorAll('.scal-area-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.areas.push(cb.value);
          } else {
            filtros.areas = filtros.areas.filter(function (a) { return a !== cb.value; });
          }
          atualizarLabelArea();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!areaDropdown.contains(e.target)) {
          areaPanelEl.hidden = true;
          areaBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelArea() {
      var btn = wrapper.querySelector('.scal-area-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-area-btn-label');
      if (!label) return;
      if (filtros.areas.length === 0) {
        label.textContent = 'Todas as áreas';
      } else if (filtros.areas.length === 1) {
        label.textContent = filtros.areas[0];
      } else {
        label.textContent = filtros.areas.length + ' áreas';
      }
    }

    function atualizarLabelMes() {
      var btn = wrapper.querySelector('.scal-mes-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-mes-btn-label');
      if (!label) return;
      if (filtros.meses.length === 0) {
        label.textContent = 'Todos os meses';
      } else if (filtros.meses.length === 1) {
        var cb = wrapper.querySelector('.scal-mes-check[value="' + filtros.meses[0] + '"]');
        if (cb) {
          var itemEl = cb.closest('.scal-mes-item');
          label.textContent = itemEl ? itemEl.querySelector('span').textContent.trim() : filtros.meses[0];
        }
      } else {
        label.textContent = filtros.meses.length + ' meses';
      }
    }

    function filtrarMesesPorAno(ano) {
      var panel = wrapper.querySelector('.scal-mes-panel');
      if (!panel) return;
      panel.classList.toggle('scal-mes-panel--ano-filtrado', ano !== 'todos');
      panel.querySelectorAll('.scal-mes-item').forEach(function (item) {
        var mostra = ano === 'todos' || item.dataset.ano === ano;
        item.classList.toggle('scal-mes-item--oculta', !mostra);
        if (!mostra) {
          var cb = item.querySelector('.scal-mes-check');
          if (cb && cb.checked) {
            cb.checked = false;
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
        }
      });
      atualizarLabelMes();
    }

    /* ── Limpar filtros ── */
    wrapper.querySelectorAll('.scal-limpar-filtros').forEach(function (btnLimpar) {
      btnLimpar.addEventListener('click', function () {
        filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', tipo: 'todos' };
        wrapper.querySelectorAll('.scal-select').forEach(function (s) { s.value = 'todos'; });
        wrapper.querySelectorAll('.scal-mes-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-area-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-mes-item').forEach(function (item) { item.classList.remove('scal-mes-item--oculta'); });
        var resetPanel = wrapper.querySelector('.scal-mes-panel');
        if (resetPanel) resetPanel.classList.remove('scal-mes-panel--ano-filtrado');
        atualizarLabelMes();
        atualizarLabelArea();
        wrapper.querySelectorAll('.scal-chip[data-valor="todos"]').forEach(function (b) { b.classList.add('scal-chip--ativo'); });
        wrapper.querySelectorAll('.scal-chip:not([data-valor="todos"])').forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        viewManual = false;
        aplicarFiltros();
      });
    });


    /* ── Mostrar/ocultar botão limpar inline ── */
    function atualizarBtnLimpar() {
      var temFiltro = filtros.areas.length > 0 || filtros.meses.length > 0 ||
        Object.keys(filtros).some(function (k) {
          return k !== 'areas' && k !== 'meses' && filtros[k] !== 'todos';
        });
      var btnInline = wrapper.querySelector('.scal-limpar-filtros--inline');
      if (btnInline) btnInline.style.display = temFiltro ? '' : 'none';
    }

    /* ── Filtro por item ── */
    function itemPassaFiltro(el) {
      return (
        (filtros.areas.length === 0    || filtros.areas.indexOf(el.dataset.area) !== -1) &&
        (filtros.ano        === 'todos' || el.dataset.ano        === filtros.ano) &&
        (filtros.meses.length === 0    || filtros.meses.indexOf(el.dataset.mes) !== -1) &&
        (filtros.status     === 'todos' || el.dataset.status     === filtros.status) &&
        (filtros.modalidade === 'todos' || el.dataset.modalidade === filtros.modalidade)
      );
    }

    /* ── Aplicar filtros ── */
    function aplicarFiltros() {
      atualizarBtnLimpar();
      var totalVisiveis = 0;

      /* Kanban */
      wrapper.querySelectorAll('.scal-coluna').forEach(function (coluna) {
        var cards = coluna.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) { visiveis++; totalVisiveis++; }
        });
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = visiveis;
        var vazio = coluna.querySelector('.scal-coluna-vazia');
        if (vazio) vazio.style.display = visiveis === 0 ? 'flex' : 'none';
        coluna.classList.toggle('scal-coluna--vazia-total', visiveis === 0);
      });

      /* Lista */
      wrapper.querySelectorAll('.scal-lista-grupo').forEach(function (grupo) {
        var rows = grupo.querySelectorAll('.scal-lista-row');
        var visiveis = 0;
        rows.forEach(function (row) {
          var ok = itemPassaFiltro(row);
          row.style.display = ok ? '' : 'none';
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });

      /* Estado vazio */
      var vazioEl = wrapper.querySelector('.scal-vazio-filtro');
      if (vazioEl) vazioEl.style.display = totalVisiveis === 0 ? '' : 'none';

      /* Auto-view */
      if (!viewManual) {
        var autoView;
        if (totalVisiveis > 80) {
          autoView = 'lista';
        } else {
          autoView = 'calendario';
        }
        mudarView(autoView, false);
      } else if (viewAtual === 'calendario') {
        renderizarCalendario();
      }
    }

    /* ── Renderizar grid de cards ── */
    function renderizarCalendario() {
      var grid = wrapper.querySelector('.scal-grid-cards');
      if (!grid) return;
      grid.innerHTML = '';

      wrapper.querySelectorAll('[data-view-container="kanban"] .scal-coluna').forEach(function (coluna) {
        var cardsVisiveis = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto)');
        if (cardsVisiveis.length === 0) return;

        var tituloEl = coluna.querySelector('.scal-coluna-titulo');
        var anoEl = coluna.querySelector('.scal-coluna-ano');
        var mesLabel = (tituloEl ? tituloEl.textContent.trim() : '') + (anoEl ? ' ' + anoEl.textContent.trim() : '');

        var header = document.createElement('div');
        header.className = 'scal-grid-mes-header';
        header.innerHTML =
          '<span class="scal-grid-mes-titulo">' + mesLabel + '</span>' +
          '<span class="scal-grid-mes-count">' + cardsVisiveis.length + ' itens</span>';
        grid.appendChild(header);

        var cardsContainer = document.createElement('div');
        cardsContainer.className = 'scal-grid-mes-cards';
        cardsVisiveis.forEach(function (card) {
          var clone = card.cloneNode(true);
          clone.classList.remove('scal-card--oculto');
          cardsContainer.appendChild(clone);
        });
        grid.appendChild(cardsContainer);
      });
    }

    /* ── Nav buttons do kanban ── */
    var board = wrapper.querySelector('.scal-board');
    var btnPrev = wrapper.querySelector('.scal-board-nav--prev');
    var btnNext = wrapper.querySelector('.scal-board-nav--next');
    if (board && btnPrev && btnNext) {
      var SCROLL_STEP = 280;
      function atualizarNavBtns() {
        btnPrev.classList.toggle('scal-board-nav--oculto', board.scrollLeft <= 0);
        btnNext.classList.toggle('scal-board-nav--oculto', board.scrollLeft + board.clientWidth >= board.scrollWidth - 4);
      }
      btnPrev.addEventListener('click', function () { board.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' }); });
      btnNext.addEventListener('click', function () { board.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' }); });
      board.addEventListener('scroll', atualizarNavBtns, { passive: true });
      atualizarNavBtns();
    }

    /* ── Init ── */
    aplicarFiltros();
  }());
</script>